<template>
  <div style="padding-bottom:100px">
    <music-header ref="musicHeaderDom">
      <template v-slot:right="{currentTarget}">
        <div v-if="currentTarget===0" class="playAll">
          <i class="iconfont iconbofang1"></i> 播放全部
        </div>
        <div v-if="currentTarget===1" class="choose">
          <span :class="{active:currentChoose==='推荐'}" @click="currentChoose='推荐'">推荐</span>
          <span :class="{active:currentChoose==='全部'}" @click="currentChoose='全部'">全部</span>
        </div>
      </template>
      <template #main>
        <!-- <new-song :type="musicHeaderDom.currentCityType"></new-song> -->
        <!-- <new-album :area="musicHeaderDom.currentAreaType" :currentChoose="currentChoose"></new-album> -->
        <div style="marginTop:16px">
          <component
            :is="currentComponent"
            :type="musicHeaderDom.currentCityType"
            :area="musicHeaderDom.currentAreaType"
            :currentChoose="currentChoose"
          ></component>
        </div>
      </template>
    </music-header>
  </div>
</template>

<script setup lang="ts">
import musicHeader from './musicHeader.vue'
import newAlbum from './prod/newAlbum.vue'
import newSong from './prod/newSong.vue'
import { computed, ref } from 'vue'
const currentChoose = ref('推荐')
const musicHeaderDom = ref({ currentCityType: 0, currentTarget: 0 })
const currentComponent = computed(() => {
  const componentList = [newSong, newAlbum]
  return componentList[musicHeaderDom.value.currentTarget]
})
</script>

<style lang="less" scoped>
.playAll {
  width: 100px;
  background-color: #c3473a;
  text-align: center;
  color: #fff;
  font-size: 12px;
  line-height: 25px;
  height: 25px;
  border-radius: 25px;
  .iconfont {
    font-size: 12px;
  }
}
.choose {
  span {
    font-size: 13px;
    font-weight: bold;
    margin: 0 16px;
    padding: 2px 8px;
    border-radius: 15px;
    &:hover {
      color: #b2b2b2;
      cursor: pointer;
    }
  }
}
.active {
  background-color: #2d2726 !important;
  color: #c3473a !important;
}
</style>